<template>
  <div class="adivice-info">
    <!-- 顶栏 -->
    <div class="search-content">
      <Col class="panel content-header"
        :span="24">
      <div class="title-bar cf">
        <h5 class="fl">
          <span>
            <a href="javascript:void(0);"
              class="link"
              @click="backToCompany">
              <i class="fa fa-angle-left"
                aria-hidden="true"></i>返回上一页</a>
            <span class="dashboard-card-sep">|</span>
            <span class="dashboard-card-name"><span>设备详情</span></span>
          </span>
        </h5>
        <Breadcrumb>
          <BreadcrumbItem to="/video">热成像监控</BreadcrumbItem>
          <BreadcrumbItem to="/video/device">设备管理</BreadcrumbItem>
          <BreadcrumbItem>设备详情</BreadcrumbItem>
        </Breadcrumb>
      </div>
      </Col>
    </div>
    <!-- 内容栏 -->
    <Col class="panel tab-panel adevice-tab-panel"
      style="height:calc(100% - 42px);"
      :span="24">
    <Tabs style="height: 100%;"
      :animated="false"
      :value="tabCurrentName"
      @on-click="tabBeClick">
      <TabPane label="设备详情"
        name="first"
        style="height:100%;">
        <transition name="scale-transverse">
          <DeviceDetailTabContent :id="id"
            v-if="tabCurrentName==='first'" />
        </transition>
      </TabPane>
      <TabPane label="数据详情"
        v-if="!hideHaiKang&&yingPanLuXiangJi"
        name="second"
        style="height:100%;">
        <transition name="scale-transverse">
          <detail :id="id"
            v-if="tabCurrentName==='second'" />
        </transition>
      </TabPane>
      <TabPane label="参数采集"
        v-if="!hideHaiKang &&yingPanLuXiangJi"
        name="third"
        style="height:100%;">
        <transition name="scale-transverse">
          <collect :id="id"
            v-if="tabCurrentName==='third'" />
        </transition>
      </TabPane>
      <TabPane label="报警设置"
        v-if="yingPanLuXiangJi"
        name="forth"
        style="height:100%;">
        <transition name="scale-transverse">
          <alarm :id="id"
            v-if="tabCurrentName==='forth'" />
        </transition>
      </TabPane>
    </Tabs>
    </Col>
  </div>
</template>

<script>
import { getDisk, getVideoParams } from '@/api'
import detail from './components/device-detail'
import collect from './components/device-collect'
import alarm from './components/device-alarm'
import DeviceDetailTabContent from './components/DeviceDetailTabContent'
export default {
  components: {
    detail,
    collect,
    alarm,
    DeviceDetailTabContent
  },
  data() {
    return {
      tabCurrentName: 'first',
      id: null,
      hideHaiKang: false,
      yingPanLuXiangJi: false
    }
  },

  beforeRouteUpdate(to, from, next) {
    next(vm => {
      vm.id = vm.$route.params.id
      vm._getDisk()
      this.getDeviceDetai()
    })
  },

  mounted() {
    this.id = this.$route.params.id
    this.getDeviceDetai()
  },

  methods: {
    getDeviceDetai() {
      const params = { id: this.id }
      getVideoParams(params).then(res => {
        const baseInfo = res.data.base
        const { deviceNo, type } = baseInfo
        if (type === 1) {
          this.yingPanLuXiangJi = false
        } else {
          this.yingPanLuXiangJi = true
        }
        if (deviceNo.startsWith('hk')) {
          this.hideHaiKang = true
        } else {
          this.hideHaiKang = false
        }
      })
    },
    backToCompany() {
      this.$router.push('/video/device')
    },
    tabBeClick(name) {
      this.tabCurrentName = name
    }
  }
}
</script>
